<!-- 首页配置 -->
<template>
    <div style="display: flex; justify-content: space-between;">
        <el-card style="width:24%;" v-loading="loading1">
            <template #header>
                <div class="card-header">
                    <span>第一页</span>
                </div>
            </template>
            <el-form :model="homeList[0]" label-width="auto">
                <el-form-item label="logo选择">
                    <el-radio-group v-model="homeList[0].logo">
                        <el-radio value="colours">彩色</el-radio>
                        <el-radio value="white">白色</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="导航字体颜色">
                    <el-color-picker v-model="homeList[0].navColor" />
                </el-form-item>
                <el-form-item label="轮播图">
                    <el-upload v-model:file-list="fileList" :action="action" :on-success="(res) => handleSuccess(res,0)" :before-upload="beforeUpload" :show-file-list="false">
                        <el-button type="primary">新增</el-button>
                    </el-upload>
                    <el-table :data="homeList[0].urls">
                        <el-table-column label="预览">
                            <template #default="scope">
                                <img v-if="['jpg', 'jpeg', 'png'].includes(scope.row.url.split('.').pop().toLowerCase())" :src="scope.row.url" alt="" style="width: auto; height: 100px;">
                                <video v-else-if="['mp4','m4v'].includes(scope.row.url.split('.').pop().toLowerCase())" controls style="width: auto; height: 100px;">
                                    <source :src="scope.row.url" type="video/mp4">
                                </video>
                            </template>
                        </el-table-column>
                        <el-table-column label="排序">
                            <template #default="scope">
                                <el-input v-model="scope.row.sort" type="number" />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button link type="danger" @click="handleDelete(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit(homeList[0])">保存</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card style="width:24%;">
            <template #header>
                <div class="card-header">
                    <span>第二页</span>
                </div>
            </template>
            <el-form :model="homeList[1]" label-width="auto">
                <el-form-item label="logo选择">
                    <el-radio-group v-model="homeList[1].logo">
                        <el-radio value="colours">彩色</el-radio>
                        <el-radio value="white">白色</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="导航字体颜色">
                    <el-color-picker v-model="homeList[1].navColor" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit(homeList[1])">保存</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card style="width:24%;">
            <template #header>
                <div class="card-header">
                    <span>第三页</span>
                </div>
            </template>
            <el-form :model="homeList[2]" label-width="auto">
                <el-form-item label="logo选择">
                    <el-radio-group v-model="homeList[2].logo">
                        <el-radio value="colours">彩色</el-radio>
                        <el-radio value="white">白色</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="导航字体颜色">
                    <el-color-picker v-model="homeList[2].navColor" />
                </el-form-item>
                <el-form-item label="产品">
                    <el-table :data="homeList[2].products">
                        <el-table-column label="图片">
                            <template #default="scope">
                                <el-upload v-model:file-list="fileList" :action="action" :on-success="(res) => handleSuccess(res,2,scope.$index)" :show-file-list="false">
                                    <el-button type="primary" link>重新上传</el-button>
                                </el-upload>
                                <img :src="scope.row.url" alt="" style="width: auto; height: 100px;">
                            </template>
                        </el-table-column>
                        <el-table-column label="产品名称">
                            <template #default="scope">
                                <el-input v-model="scope.row.title" />
                            </template>
                        </el-table-column>
                        <el-table-column label="产品英文名称">
                            <template #default="scope">
                                <el-input v-model="scope.row.enTitle" />
                            </template>
                        </el-table-column>
                        <el-table-column label="介绍">
                            <template #default="scope">
                                <el-input v-model="scope.row.intro" type="textarea" :rows="2" />
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit(homeList[2])">保存</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card style="width:24%;">
            <template #header>
                <div class="card-header">
                    <span>第四页</span>
                </div>
            </template>
            <el-form :model="homeList[3]" label-width="auto">
                <el-form-item label="logo选择">
                    <el-radio-group v-model="homeList[3].logo">
                        <el-radio value="colours">彩色</el-radio>
                        <el-radio value="white">白色</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="导航字体颜色">
                    <el-color-picker v-model="homeList[3].navColor" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit(homeList[3])">保存</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
  
  <script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { homeConfigList, homeConfigAdd, homeConfigUpdate } from '@/api/allApi'

import { ElMessage, ElMessageBox } from 'element-plus/es'

const homeList = ref([
	{ logo: 'colours', navColor: '#000000' },
	{ logo: 'colours', navColor: '#000000' },
	{ logo: 'colours', navColor: '#000000' },
	{ logo: 'colours', navColor: '#000000' }
])
onMounted(() => {
	getList()
})
const getList = () => {
	homeConfigList({ websiteId: Number(localStorage.getItem('WebsiteId')) }).then((res: any) => {
		if (res.code == 0) {
			res.data.forEach((item: any, index: number) => {
				homeList.value[index] = {
					...JSON.parse(item.jsonContent),
					id: item.id
				}
			})
		}
	})
}
const onSubmit = (formEl: any) => {
	if (formEl.id == 3) {
		//这是第一页
		formEl.urls.sort((a, b) => a.sort - b.sort)
	}
	homeConfigUpdate({
		id: formEl.id,
		websiteId: Number(localStorage.getItem('WebsiteId')),
		jsonContent: JSON.stringify(formEl)
	}).then((res: any) => {
		if (res.code == 0) {
			ElMessage.success('保存成功')
		}
	})
}
const fileList = ref([])
const action = ref(import.meta.env.VITE_API_URL + '/sys/file/upload?access_token=' + JSON.parse(localStorage.getItem('maToken')))
const loading1 = ref(false)
const beforeUpload = (file: any) => {
    loading1.value = true
}
const handleSuccess = (res: any, index: any, productIndex: any) => {
	if (index == 0) {
		if (!homeList.value[0].urls) {
			homeList.value[0].urls = []
		}
		//第一页是新增，没有productIndex
		homeList.value[0].urls.push({ url: res.data.url,sort:0 })
        loading1.value = false
	} else if (index == 2) {
		//第三页是修改
		homeList.value[2].products[productIndex].url = res.data.url
	}
}
const handleDelete = (index: number) => {
	homeList.value[0].urls.splice(index, 1)
}
</script>
  
  <style lang="scss" scoped>
</style>
  